<template>
	<div style="width: 500px;">
		<el-input
		  placeholder="请输入部门名称进行搜索..."
		  prefix-icon="el-icon-search"
		  v-model="filterText">
		</el-input>
		
		<el-tree
		  :data="deps"
		  :props="defaultProps"
		  :filter-node-method="filterNode"
		  :expand-on-click-node="false"
		  :default-expanded-keys="expandedKeys"
		  node-key="id"
		  ref="tree">
		  <span class="custom-tree-node" slot-scope="{ node, data }"
		   style="display: flex;justify-content: space-between;width: 100%;">
		      <span>{{ data.name }}</span>
		      <span>
		          <el-button
		          type="primary"
		          size="mini"
				  class="depBtn"
		          @click="() => append(data)">
		          添加部门
		          </el-button>
		          <el-button
		          type="danger"
		          size="mini"
				  class="depBtn"
		          @click="() => remove(data)">
		          删除部门
		          </el-button>
		      </span>
		  </span>
		</el-tree>
		<el-dialog
		  title="添加部门"
		  :visible.sync="dialogVisible"
		  width="30%">
		  <div>
			  <table>
				  <tr>
					  <td>
						  <el-tag>上级部门</el-tag>
					  </td>
					  <td>{{parentName}}</td>
				  </tr>
				  <tr>
					  <td>
						  <el-tag>部门名称</el-tag>
					  </td>
					  <td>
						  <el-input v-model="dep.name" placeholder="请输入部门名称..."></el-input>
					  </td>
				  </tr>
			  </table>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="addDep()">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		name: 'DepManage',
		data(){
			return{
				filterText: "",
				deps: [],	
				defaultProps: {
					children: 'children',
					label: 'name'
				},
				dialogVisible: false,
				dep:{
					name: "",
					parentId: -1
				},
				parentName: "",
				expandedKeys: []
			}
		},
		watch: {
		    filterText(val) {
		        this.$refs.tree.filter(val);
		    }
		},
		mounted() {
			this.initDeps();
		},
		methods:{
			initDep(){
				this.dep = {
					name:"",
					parentId: -1
				};
				this.parentName = "";
			},
			//添加
			addDep(){
				this.postRequest("/system/basic/department/",this.dep).then(resp=>{
					this.initDep();
					if (resp) {
						this.expandedKeys = [];
						this.expandedKeys.push(resp.object.id);//需要展开添加后的节点
						this.initDeps();
					}
					this.dialogVisible = false;
				});
			},
			//显示弹出框
			append(parentDep){
				this.dialogVisible = true;
				this.parentName = parentDep.name;
				this.dep.parentId = parentDep.id;
			},
			remove(dep){
				this.$confirm('此操作将永久删除['+dep.name+']部门, 是否继续?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
							this.deleteRequest("/system/basic/department/"+dep.id).then(resp=>{
								if (resp) {
									this.expandedKeys = [];
									this.expandedKeys.push(dep.parentId);
									this.initDeps();
								}
							});
				        }).catch(() => {
				          this.$message({
				            type: 'info',
				            message: '已取消删除'
				          });          
				        });
			},
			initDeps(){
				this.getRequest("/system/basic/department/").then(resp=>{
					if (resp) {
						this.deps = resp;
					}
				});
			},
			filterNode(value, data) {
			    if (!value) return true;
			    return data.name.indexOf(value) !== -1;
			}
		}	
	}
</script>

<style scoped>
	.depBtn{
		padding: 2px;
	}
</style>
